<template>
  <a-modal
    v-model:open="visible"
    :title="props.isEdit ? '编辑操作日志模板' : '新增操作日志模板'"
    @ok="handleOk"
    destroyOnClose
    :width="450"
    @cancel="handleCancel"
    centered
  >
    <a-form
      :model="form"
      :rules="rules"
      ref="formRef"
      :labelCol="{
        style: {
          width: '120px',
        },
      }"
    >
      <a-form-item label="操作类型" name="type">
        <a-select
          v-model:value="form.type"
          placeholder="请选择"
          class="formInput"
          show-search
          optionFilterProp="label"
          allow-clear
          disabled="true"
        >
          <a-select-option
            v-for="item in FAULT_REGISTRATION_TYPE"
            :key="item.type"
            :value="item.type"
            :label="item.configName"
          >
            {{ item.configName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="操作日志模板" name="operateTemplate">
        <a-textarea
          v-model:value="form.operateTemplate"
          placeholder="Autosize height with minimum and maximum number of lines"
          :auto-size="{ minRows: 2, maxRows: 5 }"
        />
        <span style="color: red; font-size: 12px"
          >（注意：为避免程序出错，请勿修改【】内的内容）</span
        >
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>

import { isArray, isObject, debounce } from "lodash-es"
import { FAULT_REGISTRATION_TYPE } from "@/constants/faultRegistration.js"
const $api = inject("$api")
const props = defineProps({
  addTemplateConfigVisible: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {},
  },
})
const visible = ref(props.addTemplateConfigVisible)
watch(
  () => props.addTemplateConfigVisible,
  (val) => {
    visible.value = val
    if (val) {
      if (val && props.isEdit) {
        form.value = {
          id: props.rowData.id,
          type: props.rowData.type,
          operateTemplate: props.rowData.operateTemplate,
        }
      } else {
        form.value = {
          type: null,
          operateTemplate: null,
        }
      }
    }
  }
)

const emit = defineEmits(["update:addTemplateConfigVisible", "success"])
const time = ref([])
const formRef = ref(null)
const form = ref({
  type: null,
  operateTemplate: null,
})

const rules = {
  type: [{ required: true, message: "请选择操作类型", trigger: "blur" }],
  operateTemplate: [
    { required: true, message: "请输入操作模版", trigger: "blur" },
  ],
}

const handleSaveTime = () => {
  if (time.value?.length > 0) {
    form.value.flatTime.push(prefixDate(time.value))
    time.value = []
    formRef.value.validateFields("flatTime")
  }
}
const prefixDate = (value) => {
  if (isArray(value)) {
    let date1 = value[0]
    let date2 = value[1]
    return date1 + "-" + date2
  }
  if (isObject(value)) {
    let date1 = value.startTime
    let date2 = value.endTime
    return date1 + "-" + date2
  }
}
const handleCloseDate = (index, type) => {
  form.value.flatTime.splice(index, 1)
}
const handleOk = async () => {
  try {
    await formRef.value.validate()
    emit("success", form.value)
    handleCancel()
  } catch (error) {
    console.error("表单验证失败", error)
  }
}

const handleCancel = () => {
  formRef.value?.resetFields()
  form.value.flatTime = []
  emit("update:addTemplateConfigVisible", false)
}
onMounted(() => {})
</script>

<style scoped>
.formInput {
  width: 90%;
}
.tagConent {
  margin-top: 10px;
}
</style>
